import React, { useEffect, useState } from 'react'
import {message } from 'antd';
import { Editor, Toolbar } from '@wangeditor/editor-for-react'
import '@wangeditor/editor/dist/css/style.css' // 引入 css
import { upload } from '../../api/api'

export default function NewsEditor(props) {
    // editor 实例
    const [editor, setEditor] = useState(null)                   // JS 语法

    // 编辑器内容
    const [html, setHtml] = useState(props.content)
    useEffect(() => {
        setHtml(props.content)
    }, [props.content])

    // 工具栏配置
    const toolbarConfig = {}                        // JS 语法

    // 编辑器配置
    const editorConfig = {                         // JS 语法
        placeholder: '请输入内容...',
        MENU_CONF: {
            // uploadImage: {
            //     // base64LimitSize: 10 * 1024 * 1024 // 10M 以下插入 base64
            // }
            uploadImage: {
                // 自定义上传
                // async customUpload(file: File, insertFn: InsertFnType) {  // TS 语法
                async customUpload(file, insertFn) {                   // JS 语法
                    // console.log(file);
                    // file 即选中的文件
                    // 自己实现上传，并得到图片 url alt href
                    let formData = new FormData();
                    formData.append('file', file);
                    //获取上传图片信息
                    const res=await upload(formData)
                    if (res.data.code !== 200) return message.error('文件上传错误！');
                        // console.log(res.data.data.imgHost+res.data.data.imgUrl);
                        // 最后插入图片
                        // insertFn(src, alt, url)
                        insertFn(res.data.data.imgHost+res.data.data.imgUrl, '', '')
                }
            }
        }
    }

    // 及时销毁 editor ，重要！
    useEffect(() => {
        return () => {
            if (editor == null) return
            editor.destroy()
            setEditor(null)
        }
    }, [editor])
    return (
        <div>
            <div style={{ border: '1px solid #ccc', zIndex: 100 }}>
                <Toolbar
                    editor={editor}
                    defaultConfig={toolbarConfig}
                    mode="default"
                    style={{ borderBottom: '1px solid #ccc' }}
                />
                <Editor
                    defaultConfig={editorConfig}
                    value={html}
                    onCreated={setEditor}
                    onChange={editor => {
                        // console.log(editor.getHtml());
                        setHtml(editor.getHtml())
                        props.getContent(editor.getHtml())
                    }}
                    mode="default"
                    style={{ height: '500px', overflowY: 'hidden' }}
                />
            </div>
        </div>
    )
}
